<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片管理</title>

<link rel="stylesheet" type="text/css" href="${request.contextPath}/resources/js/tab/bootstrap-addtabs.css" media="screen" />
<style>
.border_show{
	border:1px solid #F00
}
.border_show2{
	border:1px solid #F11
}
.album_item{
	width: 170px;background-color: #FFF;margin-left:10px;margin-top:20px;float:left;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); padding: 6px;
}
.picture_item{
	position: relative;height:120px;
}
.img{
	float:left;
	width:160px;
	height:120px;
}
.album_title{
	text-align:center;
}
.pic-num-wrap {
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(26, 26, 26, 0.4));
    bottom: 0;
    height: 50px;
    left: 0;
    position: absolute;
    text-align: right;
    width: 100%;
}

.pic-num {
    color: #fff;
    display: inline-block;
    font-family: "Gulim";
    font-size: 26px;
    line-height: 1;
    margin: 20px 5px 0 0;
}
</style>
<script type="text/javascript" src="${request.contextPath}/resources/js/tab/bootstrap-addtabs.js"></script>

<script>

$(function(){
    $('#tabs').addtabs({monitor:'.topbar'});
    $('#save').click(function(){
        Addtabs.add({
           id: $(this).attr('addtabs'),
           title: $(this).attr('title') ? $(this).attr('title') : $(this).html(),
           content: Addtabs.options.content ? Addtabs.options.content : $(this).attr('content'),
           url: $(this).attr('url'),
           ajax: $(this).attr('ajax') ? true : false
        })
    });
})
//打开相册        
var openAlbum = function(){
    Addtabs.add({
       id: 1,
       title: '相册详情',
       content: 3,
       url: 4,
       ajax: true
    })
}


var queryAlbumByOption = function()
{
	$.ajax({
		url:'${request.contextPath}/album/queryAlbumByOption.htm',
		type:'post',
		dataType:'html',
		async:'false',
		cache:false,
		processData:true,
		data:$("#albumName").val()+'&isMap=1',
		success:function(html)
		{
			$('#dataDiv').html(html);
		}
	});
}



//打开添加相册的模态框
var preAddAlbum = function(){
	
	$.ajax({
		url:'${request.contextPath}/album/preAddAlbum.htm',
		type:'post',
		async:'false',
		cache:false,
		processData:true,
		success:function(html)
		{
			$('#add_edit').html(html);
			$('#addEditModal').modal();
		}
	});
}
</script>
</head>
<body>

        <!--<header class="topbar admin-header">
            <div class="topbar-collapse">
                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default" data-addtab="mail" url="/admin/mail"><i class="glyphicon glyphicon-envelope"></i>我的邮件</button>
                    <button type="button" class="btn btn-default" data-addtab="profile" url="/admin/profile"><i class="glyphicon glyphicon-user"></i>我的属性</button>
                    <button type="button" class="btn btn-default" data-addtab="message" url="/admin/message" content="指定内容"><i class="glyphicon glyphicon-bullhorn"></i>指定内容</button>
                    <button type="button" class="btn btn-default" data-addtab="setting" url="/admin/setting" title="指定标题"><i class="glyphicon glyphicon-cog"></i>指定标题</button>
                    <button type="button" class="btn btn-default" data-addtab="ajax" url="/admin/profiles" ajax='true'><i class="glyphicon glyphicon-user"></i>使用AJAX</button>
                </div>
            </div>
        </header>-->


        <div class="col-md-12">
            <div id="tabs">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">相册列表</a></li>                    
                </ul>
                <!-- Tab panes -->
                <div class="tab-content" style="background-color: #e6e1d3;min-height:600px;width: 100%;float:left">
                    <!--
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <button type="button" class="btn btn-default" addtabs="save" id="save" url="/admin/save">
                            <i class="glyphicon glyphicon-floppy-disk"></i>
                            SAVE                            
                        </button>
                    </div>     -->    
                    <div role="tabpanel" class="tab-pane active" id="home"> 
                	 	<div style="margin-top:15px;width:100%;text-align:center;">

			            	 <div class="form-group">
									<label>相册名称</label>
									<input type="text" placeholder="相册名称" id="albumName" value="">
		                   			<button type="button" class="btn btn-primary" onclick="queryAlbumByOption();">
			              				查询
			            	 		</button>
		                   			<button type="button" class="btn btn-primary" onclick="preAddAlbum();">
			              				新建
			            	 		</button>
							 </div>
		           		</div>
                   		<hr style="filter: alpha(opacity=100,finishopacity=0,style=3)" width="100%" color="#987cb9" size="3"/>
                   		
                   		<div id="dataDiv">
                   		</div>
	                    <!--<div class="album_item border_show">
	                    	<div class="picture_item">
	                    		<a href="javascript:openAlbum();">
	                    			<img class="img" src="${request.contextPath}/resources/images/defult_picture.jpg"/>
	                    		</a>	
	                    	</div>
	                    	<div class="album_title">
	                    		名称
	                    	</div>
	                    </div>--> 


	                    
	 
	                    
	                    

	                    
	 
	                    
	                    

	                    
                    </div>

                                                                                                
                              
                </div>

            </div>

        </div>

<!-- 模态框 -->
<div class="modal fade" id="addEditModal" tabindex="-1" role="dialog" data-backdrop="static"
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-md" id="add_edit">
 
   </div>
</div>
<script>
queryAlbumByOption();
</script>

</body>
</html>
